<template>
  <div id="app">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div id="menuLeft">
      <div id="step1">
        <h4>数据选择：</h4>
        <el-cascader
            ref="getSelectData"
            placeholder="请选择需要渲染的数据"
            v-model="dataValue"
            :options="options"
            @change="handleSelectChange"
            filterable></el-cascader>
      </div>
      <div id="VisualShow">
        <h4>选择网格图渲染方式</h4>
        <el-button @click="addGrid" :disabled="isDisabled">网格图</el-button>
        <el-button @click="clear">清除</el-button>
      </div>
    </div>
    <div ref="map" id="main" style="height:100%;width:100%;"></div>

  </div>
</template>

<script>

import 'echarts/extension/bmap/bmap'
import {baidumap} from '@/assets/js/Public/baiduditu'

import * as echarts from "echarts";

export default {
  name: "Grid",
  data() {
    return {
      isDisabled: true,
      shopShow: false,
      mapStyle: {
        styleJson: baidumap,
      },
      map: {},
      mapLng: 116.403,
      mapLat: 39.923,
      mapZoom: 12,
      options: this.$store.state.dataPoint[0].children,

      dataValue: [],
      taxiData:[],
      hotData:[],
      loading : {},
      vecdata : [],
      geodata:[],
      girddata:[],
      maxMag : 0 ,
      minMag : 15,
    }
  },
  created() {
    this.$store.commit('loadMenuDataPoint')
  },
  mounted() {
    this.init()
  },
  methods: {

    init() {
      this.map = this.$echarts.init(this.$refs.map)
      this.map.setOption({
        bmap: {
          center: [this.mapLng, this.mapLat],
          zoom: this.mapZoom,
          roam: true,
        }, //bmap
      })
      this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },
    clear(){
      // this.map.clear()
      this.map.setOption({
        bmap: {
          center: [this.mapLng, this.mapLat],
          zoom: this.mapZoom,
          roam: true,
        }
      }, true)
      this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },
    loadingStart(){

      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    handleSelectChange(val){
      this.shopShow = true
      this.isDisabled = true
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
      console.log(this.downSelectData,'获取下拉节点的值');
      this.request.get("/taxiData/gridmap", {
              params:{
                downSelectData: this.downSelectData,
              }
            }).then(res => {
                this.taxiData = res.data
                this.shopShow = !this.shopShow
                this.isDisabled = !this.isDisabled
                // console.log(this.taxiData)
            })
    },
    addGrid(){
      this.clear();
      // this.request.get("/taxiData/gridmap", {
      //         params:{
      //           downSelectData: this.downSelectData,
      //         }
      //       }).then(res => {
      //   this.taxiData = res.data
      //   console.log(this.taxiData)

          //创建新数组，用来接收taxiData的第二列数据
          let arrmax = []
          for (let i = 0 ;i < this.taxiData.length;i++) {
            let a = this.taxiData[i][2]
            arrmax.push(a)
            // console.log(arrmax)
          }
          //获得最大值最小值
          let maxnum = Math.max.apply(null,arrmax)
          let minnum = Math.min.apply(null,arrmax)
          console.log(maxnum)
          console.log(minnum)
          //对输入数据进行均分
          let ava=(100 * maxnum - 100 * minnum) / 800
          console.log(ava.toFixed(2))
          ava=ava.toFixed(2)
          //得到均分数组
          let arr=[]
          for(let i = 0;i < 8; i++){
            let jia= minnum + i * ava;
            arr.push(jia)
          };
          console.log(arr);

          let COLORS = ["#FFFF99", "#FFFF00", "#FFCC00", "#FF9900", "#FF6600", "#FF3300", "#FF0000", "#CC3300"];

          function renderItem(params, api) {
            var lngIndex = api.value(0);
            var latIndex = api.value(1);

            var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
            var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);
            return {
              type: 'rect',
              shape: {
                x: pointLeftTop[0],
                y: pointLeftTop[1],
                width: pointRightBottom[0] - pointLeftTop[0],
                height: pointRightBottom[1] - pointLeftTop[1]
              },
              style: api.style({
                stroke: 'rgba(0,0,0,0.1)'
              }),
              styleEmphasis: api.styleEmphasis()
            };
          }

          function getCoord(params, api, lngIndex, latIndex) {
            var coords = params.context.coords || (params.context.coords = []);
            var key = lngIndex + '-' + latIndex;
            // bmap returns point in integer, which makes cell width unstable.
            // So we have to use right bottom point.
            let latExtent = [115.9 , 116.8]
            let lngExtent = [39.5 , 40.6]
            let cellCount = [100, 100];
            let cellSizeCoord = [
              (lngExtent[1] - lngExtent[0]) / cellCount[0],
              (latExtent[1] - latExtent[0]) / cellCount[1]
            ];
            return (
                coords[key] ||
                (coords[key] = api.coord([
                  +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                  +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
                ]))
            );
          }

          const option = {

            tooltip: {},
            visualMap: {
              title: {
                text: '出租车乘客OD网格图',
                right: '20px',
                top: 26,
                textStyle: {
                  fontSize: 23,
                  color: '#feb64d'
                }
              },
              type: 'piecewise',
              inverse: true,
              top: 10,
              right:10,
              pieces: [
                {
                  gt:arr[0],
                  lte:arr[1],
                  color: COLORS[0],
                  opacity: 0.7
                },
                {
                  gt:arr[1],
                  lte:arr[2],
                  color: COLORS[1],
                  opacity: 0.7
                },
                {
                  gt:arr[2],
                  lte:arr[3],
                  color: COLORS[2],
                  opacity: 0.7
                },
                {
                  gt:arr[3],
                  lte:arr[4],
                  color: COLORS[3],
                  opacity: 0.7
                },
                {
                  gt:arr[4],
                  lte:arr[5],
                  color: COLORS[4],
                  opacity: 0.7
                },
                {
                  gt:arr[5],
                  lte:arr[6],
                  color: COLORS[5],
                  opacity: 0.7
                },
                {
                  gt:arr[6],
                  lte:arr[7],
                  color: COLORS[6],
                  opacity: 0.7
                },
                {
                  gt:arr[7],
                  color: COLORS[7],
                  opacity: 0.7
                }
              ],
              borderColor: '#ccc',
              borderWidth: 2,
              backgroundColor: '#eee',
              dimension: 2,
              inRange: {
                color: COLORS,
                opacity: 0.7
              }
            },
            series: [
              {
                type: 'custom',
                coordinateSystem: 'bmap',
                renderItem: renderItem,
                animation: false,
                emphasis: {
                  itemStyle: {
                    color: 'yellow'
                  }
                },
                encode: {
                  tooltip: 2
                },
                data: this.taxiData
              }
            ],
            bmap: {
              center: [116.403, 39.923],
              zoom: 12,
              roam: true,
              mapStyle: {
                styleJson: baidumap
              }
            }
          }
          console.log(this.taxiData,"这里是taxidata")
          console.log(option,'这里是option')
          this.map.setOption(option)

      // })
    },
    set(){

    },
  },
  beforeDestroy() {
    this.$store.commit('refresh')
  }
}
</script>

<style scoped>
#app{
  position: relative;
  height:100%;
  width:100%;
}
#loading {
  z-index: 99;
  position:absolute;
  top: 50%;
  left: 48%;
  margin-left: -130px;
  text-align: center;
  margin-top: -50px;
  width: 280px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: yellow;
  font-size: 20px;
}
#menuLeft {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 22%;
  height: 30%;
  z-index: 100;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background-color: rgba(49, 51, 53, 0.7);
  background-image: url("../../assets/image/public_resource/border_new1.png");
  background-size: 100% 100%;
  /*opacity: 0.8;*/
  border-radius: 20px;
  overflow: auto;
}
#step1{
  margin-left: 30px;
}
#VisualShow{
  margin-left: 30px;
}
</style>

